// mini浏览器切换全屏效果CD飞入动画
// 进入动画
// 由大到小横坐标和纵坐标同时偏移
// 横坐标相当于二分之一屏幕宽度减去小的cd圆心到左边屏幕的距离
// 纵坐标偏移量相当于整个屏幕高度减去大CD圆心到顶部的位置再减去小CD圆心到底部的偏移
// 离开动画

import { ref } from 'vue';
import animations from 'create-keyframe-animation';

export default function useAnimation() {
  const cdWrapperRef = ref(null);

  // enter, leave事件标识
  let entering = false;
  let leaving = false;

  // 参数DOM, done告诉vue动画执行完成
  function enter(el, done) {
    if (leaving) {
      afterLeave();
    }
    entering = true;
    // 获取位置
    const { x, y, scale } = getPosAndScale();

    // 定义过渡效果
    const animation = {
      0: {
        transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`
      },
      100: {
        transform: 'translate3d(0, 0, 0) scale(1)'
      }
    };
    // 注册动画
    animations.registerAnimation({
      name: 'move',
      animation,
      presets: {
        duration: 600, // 动画时长
        easing: 'cubic-bezier(0.45, 0, 0.55, 1)' // 动画效果(贝塞尔曲线)
      }
    });

    // 执行动画
    // 参数DOM, 动画名称, 执行完成之后的回调函数
    // 只有调用了done函数之后才会进入afterEnter函数中
    animations.runAnimation(cdWrapperRef.value, 'move', done);
  }
  // 动画结束时调用
  function afterEnter() {
    entering = false;
    // 清除动画
    animations.unregisterAnimation('move');
    cdWrapperRef.value = '';
  }

  function leave(el, done) {
    // 执行leave时enter还没结束,afterEnter就不会执行
    // entering为true代表进入了enter还没有结束,这时手动执行afterEnter,保证afterEnter一定会执行
    if (entering) {
      afterEnter();
    }
    leaving = true;
    // 获取位置
    const { x, y, scale } = getPosAndScale();
    const cdWrapperEl = cdWrapperRef.value;
    cdWrapperEl.style.transition = 'all .6s cubic-bezier(0.45, 0, 0.55, 1)';
    cdWrapperEl.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;

    // 监听动画结束事件
    cdWrapperEl.addEventListener('transitionend', next);

    function next() {
      // 解绑事件(不解绑会同时绑定多个动画)
      cdWrapperEl.removeEventListener('transitionend', next);
      // 动画结束
      done();
    }
  }
  function afterLeave() {
    leaving = false;
    // 清理操作
    const cdWrapperEl = cdWrapperRef.value;
    cdWrapperEl.style.transition = '';
    cdWrapperEl.style.transform = '';
  }

  // 偏移量计算
  function getPosAndScale() {
    // 小CD宽度
    const targetWidth = 40;
    // 小CD距离左边屏幕的距离
    const paddingLeft = 40;
    // 小CD距离底边屏幕的距离
    const paddingBottom = 30;

    // 大CD距离屏幕顶部的距离
    const paddingTop = 80;
    // 大CD宽度(整个屏幕宽度的80% )
    const width = window.innerWidth * 0.8;

    // x轴偏移量(偏移方向向左,横坐标是负值)
    const x = -(window.innerWidth / 2 - paddingLeft);
    // y轴偏移量(偏移方向向下,横坐标是正值)
    const y = window.innerHeight - paddingTop - width / 2 - paddingBottom;

    // 缩放
    const scale = targetWidth / width;
    return {
      x,
      y,
      scale
    };
  }

  return {
    cdWrapperRef,
    enter,
    afterEnter,
    leave,
    afterLeave,
    getPosAndScale
  };
}
